// 定义Store
// defineStore(仓库唯一标识,()=>{...})
import { defineStore } from 'pinia'
import { computed, ref } from 'vue'
// 将这个仓库导出 useCounterStore 将来调用这个函数 就可以拿到我们return的数据
export const useCounterStore = defineStore('counter', () => {
  // 既然是组合式API 我们就要养成习惯 每个区域存放每个功能的代码 将来维护的时候容易维护
  // 声明数据 就好比Vuex中的state 我们也可以声明多个数据
  const count = ref(100)
  // 定义操作数据的方法 (action) 在pinia中 普通函数就是action 所以我们定义普通函数来完成功能即可
  const addCount = () => count.value++
  const subCount = () => count.value--
  // 我们这里声明的其他的数据 跟上面的count不相关 所以将来修改这个msg的时候
  // 在声明msg数据的下面接着写 修改数据的方法 => 每个区域存放每个区域的代码 将来更好维护


  // 我们在Vuex中有getters 现在我们怎么声明呢？
  // 声明基于数据派生的计算属性(getters)
  // 当我们需要getters的时候 我们就提供一个 computed即可
  const doubleCount = computed(() => count.value * 2)

  // 声明其他数据
  const msg = ref('hello pinia')
  const setMsg = () => msg.value = '宇智波·佐助'
  // 我们将数据或者方法暴漏出去的return 语句始终要在pinia的最后面 因为return后面的雨具不在执行
  // 这样写的目的表示我们的状态已经全部定义完成 最后只需暴漏出去即可使用
  // 将来在组件中使用的时间 需要将数据和方法return出去 多个使用对象来包裹
  return { count, msg, addCount, subCount, setMsg, doubleCount }
  // console.log('我会执行吗？') // 有的编辑器会提示我们

  // 第三个参数 persist:true 表示 将当前的仓库 进行持久化 然后重启醒项目
}, {
  persist: {
    key: 'hm-counter'
  }
})

// pinia持久化插件
// 1. 安装插件 npm i pinia-plugin-persistedstate
// 2. 在main.ts/main.js中使用





